<template>
	<view class="detail">
        <SRV-topbar title="我的云仓" isLeft="true"></SRV-topbar>
        <view>
            <view class="columbTitle"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/my_store.png" mode="aspectFill"></image>云仓资料</view>
            <view class="list-box">
                <view class="list-left"> {{info.store.title}} <text class="btn-item" @click="showEditTitle()" v-if="info.store.editNum > 0">改名</text> </view>
                <view class="list-right"> {{info.store.no}} </view>
            </view>
            <view class="list-box">
                <view class="list-left"> 当前等级：{{info.store.role}} </view>
                <view class="list-right" @click="jump('credits_list', 'achievement')"> 业绩值：{{info.store.achievement}} </view>
            </view>
            <view class="list-box">
                <view class="list-left"  @click="jump('credits_list', 'achievement')"> 直推业绩：{{info.store.one}} </view>
                <view class="list-right" @click="jump('credits_list', 'achievement')"> 团队业绩：{{info.store.two}} </view>
            </view>
			<view class="list-box" v-if="info.store.isBusiness">
			    <view class="list-left"> 绑定店铺：{{info.store.merchant_title}} </view>
			</view>
			<view class="list-box" v-if="info.store.isBusiness">
			    <view class="list-right"> 业绩提成比例：{{info.store.achievement_ratio}} </view>
			</view>
        </view>
        
        <view v-if="info.business.isShow">
            <view class="columbTitle" ><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/parent.png" mode="aspectFill"></image>{{info.business.role}}</view>
            <view class="list-box">
                <view class="list-left"> {{info.business.title}} </view>
                <view class="list-right"> {{info.business.no}} </view>
            </view>
            <view class="list-box">
                <view class="list-left"> {{info.business.username}} </view>
                <view class="list-right" @click="callPhone()"> <image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/tel.png" mode="aspectFill"></image>{{info.business.mobile}} </view>
            </view>
        </view>
        
        <view style="padding-bottom: 160rpx;">
            <!-- <view class="columbTitle" ><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/trend.png" mode="aspectFill"></image>当天统计</view>
            <view class="list-box" v-for="(item,index) in info.dayList" :key="index" @click="jump('spreadList', 'dateType=1')">
                <view class="list-left"> {{item.title}} </view>
                <view class="list-right"> {{item.val}} </view>
            </view> -->
            
            <view class="columbTitle" v-if="info.totalList.length > jump()"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/trend.png" mode="aspectFill"></image>订单业绩统计</view>
            <view class="list-box" v-for="(item,index) in info.totalList" :key="index"  @click="jump('spreadList', 'dateType=0')">
                <view class="list-left"> {{item.title}} </view>
                <view class="list-right"> {{item.val}} </view>
            </view>
            
            <view class="columbTitle"><image src="https://hdsq.aoorange.cn/attachment/xcx/new_2022/extend.png" mode="aspectFill"></image>业务情况</view>
            <view class="list-box" v-for="(item,index) in info.childList" :key="index">
            	<view class="title"> {{item.title}} </view>
            	<view class="val"> {{item.num}} </view>
            	<view class="btn">
                    <text class="btn-item" v-for="(item2,index2) in item.buttonList" :key="index2" @click="operateFun(item2.type, index)">
                        {{item2.title}}
                    </text>
                </view>
            </view>
        </view>
        
        <!-- <button v-if="!info.store.isShow" open-type="contact" :style="'height:' + bottomHeight + 'rpx;'" class="bottom">联系客服</button> -->
        <button  :style="'height:' + bottomHeight + 'rpx;'" class="bottom" @click="showShareList()">分享店铺</button>
        
        <uni-popup ref="editTitle">
            <view class="editTitleView">
        		<view class="title">修改店铺名称</view>
        		<view class="editForm"><text>超圳</text><input type="text" placeholder="请输入店铺名称" value="username"  v-model="newTitle"/><text>云仓</text></view>
                <view class="tip">一年只有3次修改机会，当前剩余<text class="red">{{info.store.editNum}}</text>次</view>
        		<view class="btn">
        			<view @click="subEditTitle(0)">取消</view>
        			<view @click="subEditTitle(1)" style="color: #FFBC00;">确认</view>
        		</view>
        	</view>
        </uni-popup>
        <uni-popup ref="shareBox" type="bottom">
        	<view class="showShareBox">
        		<image @click="close" class="close" src="https://hdsq.aoorange.cn/attachment/xcx/icon/close1.png" mode="aspectFill"></image>
        		<view class="shareTitle">选择分享主图</view>
                <view class="shareLine">
                    <view v-for="(item,index) in info.shareList" :key="index" :class="'item ' + (nowId == index ? 'nowSel' : '')" @click="subImage(index)">
                        <image :src="item.thumb" mode="aspectFill"></image>
                        <image src="../../static/img/checkbox_check.png" mode="widthFill" class="selToken" v-if="nowId == index" style="width: 50rpx;height: 50rpx;"></image>
                    </view>
                </view>
                <view :style="'display: flex;height:' + bottomHeight + 'rpx;'">
                    <view  class="shareBtn" @click="saveImgToLocal()">保存图片</view>
                    <button class="shareBtn" open-type="share">确认分享</button>
                </view>
        	</view>
        </uni-popup>
        <uni-popup ref="pickupCode" type="bottom">
            <view class="pickupCode-box">
                <image class="img" :src="showItem.img" ></image>
                <view class="pickupCode-t">{{showItem.title}}</view>
                <view class="pickupCode-c" @click="closePickup()">关闭</view>
            </view>
        </uni-popup>
	</view>
</template>

<script>
	var _self;
	import serve from '../../static/request.js';
	import common from '../../static/jump.js';
    import commonPay from '../../static/commonPay.js';
	import ShareIndex from '../../static/share.js';
	export default {
		mixins: [ShareIndex],
		data() {
			return {
                nowId : 0,
                bottomHeight: 110,
                info: {
                    apply: {isShow: false},
                    store: {isShow: false,title: '',
					sub_title: '',
					no: '',
					role: '',
					editNum: '',
					isBusiness: false,
					merchant_title: '',
					achievement_ratio: 0,
					achievement: 0,
					one: '',
					two: '',
					},
                    business: {isShow: false},
					upgrade: {isShow: false},
                    dayList: [],
                    totalList: [],
                    pay: {pay_type: '', pay_id: '', user_money: 0, use_hdq: 0, jumpFile: ''},
                },
                payData: {
                	appkey: uni.getStorageSync('appkey'),
                	'access-token': uni.getStorageSync('access-token'),
                	pay_type: '',
                	pay_id: 0,
                	is_use_hdq: 0,
                	payment_type: 1,
                },
                payInfo: {money: 0, user_money: 0, use_hdq: 0, jumpFile: ''},
                pay_money: 0,
                showItem: {img: '', title: ''},
                newTitle: '',
			}
		},
		methods: {
			getInfo() {
				serve.request({
					url: '/member/batch/main',
					data: {
						appkey: uni.getStorageSync('appkey'),
						'access-token': uni.getStorageSync('access-token')
					},
                    v: '/v2'
				}).then(res => {
					_self.info = res.data;
				});
			},
            goOpen() {
                common.jump('appoint_view', '/pages/store/apply?applyType='+_self.info.apply.type);
            },
            operateFun(type, i) {
                let item = _self.info.childList[i];
                if(type == 'showCode') {
                    _self.showItem.img = item.codeUrl;
                    _self.showItem.title = item.title;
                    _self.$refs.pickupCode.open();
                    return ;
                }
                if(type == 'list') {
                    uni.navigateTo({
                        url: '/pages/my/myBusinessList?type=' + item.role
                    });
                    return ;
                }
            },
            goPay() {
                _self.payData.pay_type = _self.info.pay.pay_type;
                _self.payData.pay_id = _self.info.pay.pay_id;
                _self.payInfo.money = _self.info.pay.payMoney;
                _self.payInfo.user_money = _self.info.pay.user_money;
                _self.payInfo.use_hdq = _self.info.pay.use_hdq;
                _self.payInfo.jumpFile = _self.info.pay.jumpFile;
                _self.pay_money = _self.info.pay.payMoney;
                _self.calculationTotalMoney();
                _self.$refs.showPayView.open();
            },
            setUseOther(type) {
            	if(type == 1) {
            		_self.payData.is_use_hdq = _self.payData.is_use_hdq == 1 ? 0 : 1;
            	} 
            	_self.calculationTotalMoney();
            },
            selPayType(payType) {
            	if(payType == 5 && Number(_self.payInfo.user_money) < Number(_self.pay_money)) {
            		return ;
            	}
            	_self.payData.payment_type = payType;
            },
            calculationTotalMoney(){
            	_self.pay_money = JSON.parse(JSON.stringify(_self.payInfo.money));
            	if(_self.payInfo.use_hdq > 0) {
            		if(_self.payData.is_use_hdq) {
            			_self.pay_money = Number(_self.pay_money) - Number(_self.payInfo.use_hdq);
            		}
            	}
            	_self.$forceUpdate();
            },
            showShareList(){
            	_self.$refs.shareBox.open();
            },
            subImage(i) {
                _self.nowId = i;
                _self.shareItem = _self.info.shareList[_self.nowId];
                _self.$forceUpdate();
            },
            close() {
            	_self.$refs.showPayView.close();
                _self.$refs.shareBox.close();
            },
			subPayForm() {
                commonPay.payFun(_self.payData, _self.payInfo.jumpFile);
			},
            showEditTitle() {
                if(_self.info.store.editNum <= 0) {
                    uni.showToast({
                        title: '今年的三次修改店铺名称次数已用完，无法修改！',
                        icon: 'none',
                    });
                    return ;
                }
                _self.newTitle = _self.info.store.sub_title;
                _self.$refs.editTitle.open();
            },
            subEditTitle(i) {
                if(i == 0) {
                    _self.$refs.editTitle.close();
                    return ;
                }
                serve.request({
                    url: '/member/batch/edit-title',
                    data: {
                        appkey: uni.getStorageSync('appkey'),
                        'access-token': uni.getStorageSync('access-token'),
                        newTitle: _self.newTitle,
                    },
                    v : '/v2'
                }).then(res => {
                    uni.showToast({
                        title: res.message,
                        icon: 'none',
                    });
                    if(res.code == 200) {
                        _self.info.store.title = "超圳"+_self.newTitle+"云仓";
                        _self.info.store.editNum -= 1;
                        _self.$refs.editTitle.close();
                    }
                    _self.$forceUpdate();
                });
            },
            closePickup(){
                this.$refs.editTitle.close();
                this.$refs.pickupCode.close();
                this.$refs.shareBox.close();
            },
			// 快捷拨打电话
			callPhone() {
				uni.makePhoneCall({
				    phoneNumber: _self.info.business.mobile
				});
			},
			jump(jump_type, jump_link) {
				common.jump(jump_type, jump_link)
			}
		},
		onLoad() {
			_self = this;
            if(uni.getSystemInfoSync().safeAreaInsets.top > 20){
            	_self.bottomHeight = 150;
            }
			_self.getInfo();
		},
		onPullDownRefresh() {
			_self.getInfo();
		},
	}
</script>

<style scoped lang="scss">
	.detail {
		font-size: 36rpx;
		color: #1e2022;
	}
    .title{
        width: 30%;
    }
    .val{
        width: 20%;
        text-align: center;
    }
    .btn{
        width: 50%;
        text-align: right;
    }
    .btn-item{
        padding: 5rpx 20rpx;
        border: 1rpx solid #FFBC00;
        color: #FFBC00;
        margin-left: 20rpx;
        border-radius: 20rpx;
    }
    .columbTitle {
        padding: 20rpx;
        font-size: 40rpx;
        border-bottom: 2rpx solid #ccc;
    }
    .line{
        padding: 20rpx;
        border-bottom: 1rpx solid #ddd;
    }
	.list-box {
		border-bottom: 2rpx solid #eaeaea;
		display: flex;
		justify-content: space-between;
		align-content: center;
		padding: 30rpx 20rpx;
	}
	.but-box {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100vw;
		background: #ffffff;
	}
    image {
    	width: 40upx;
    	height: 40upx;
        margin-right: 20rpx;
    }
    
    .bottom {
    	width: 100%;
    	height: 100rpx;
    	line-height: 100rpx;
    	text-align: center;
    	font-size: 32rpx;
    	color: rgba(255, 255, 255, 1);
    	background: rgba(251, 202, 63, 1);
    	bottom: 0rpx;
    	position: fixed;
    }
    
    .editTitleView {
        width: 80vw;
        height: 400rpx;
        background: #FFFFFF;
        border-radius: 20rpx;
        
        .title{
            width: 100%;
            text-align: center;
            font-size: 32rpx;
            height: 80rpx;
            line-height: 80rpx;
            border-bottom: 1rpx solid #aaa;
        }
        .editForm {
            display: flex;
            align-items: center;
            padding: 0px 40rpx;
            input{
                padding: 20rpx 30rpx;
                border: 2rpx solid;
                margin: 20rpx;
                width: 50%;
            }
        }
        .btn{
            font-size: 28rpx;
            padding: 20rpx 0;
            display: flex;
            justify-content: space-between;
            border-top: 1rpx solid #aaa;
            width: auto;
            text-align: center;
            view {
                width: 50%;
                height: 80rpx;
                line-height: 80rpx;
            }
        }
        .tip {
            padding: 20rpx 10rpx;
        }
        .red{
            color: red;
        }
    }
    .pay_type {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 200upx;
    	max-height: 80vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 23upx;
    		height: 23upx;
    		right: 40upx;
    		top: 45upx;
    	}
    
    	.title {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    	}
    
    	.paypir {
    		display: flex;
    		justify-content: center;
    		flex-direction: column;
    		align-items: center;
    		// padding: 20upx 0upx 20upx;
    		font-size: 28upx;
    
    		text:last-child {
    			color: #FF5F60;
    			font-size: 50upx;
    			font-weight: bold;
    			margin-top: 10upx;
    		}
    	}
    
    	.line2 {
    		width: 100%;
    		box-sizing: border-box;
    		padding: 36upx;
    		display: flex;
    		justify-content: space-between;
    		font-size: 28upx;
    		color: #333333;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    
    		.txt {
    			color: #999999;
    		}
    
    		.nosel {
    			width: 36upx;
    			height: 36upx;
    			border: 1upx solid rgba(60, 72, 104, 1);
    			border-radius: 50%;
    		}
    
    		.sel {
    			background-image: url(../../static/img/check.png);
    			background-repeat: no-repeat;
    			width: 40upx;
    			height: 40upx;
    			background-size: 100%;
    		}
    		.nocheck {
    			width: 36upx;
    			height: 36upx;
    			border: 1upx solid rgba(60, 72, 104, 1);
    			border-radius: 20%;
    		}
    		
    		.check {
    			background: url(../../static/img/checkbox_check.png);
    			background-repeat: no-repeat;
    			width: 40upx;
    			height: 40upx;
    			background-size: 100%;
    		}
    	}
    
    	.pay_bot {
    		width: 100%;
    		position: fixed;
    		left: 0;
    		bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
    
    .showShareBox {
    	position: relative;
    	width: 100%;
    	background: #FFFFFF;
    	padding-bottom: 60upx;
    	max-height: 80vh;
    
    	text {
    		font-size: 42rpx;
    	}
    
    	.close {
    		position: absolute;
    		width: 40upx;
    		height: 40upx;
    		right: 40upx;
    		top: 30upx;
    	}
    
    	.shareTitle {
    		width: 100%;
    		text-align: center;
    		height: 100upx;
    		line-height: 100upx;
    		font-size: 36upx;
    		border-bottom: 1upx rgba(251, 251, 253, 1) solid;
    	}
        
        .shareLine{
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            padding: 20rpx;
            
        	.item {
                width: 45%;
                text-align: center;
                margin: 10rpx;
                padding: 10rpx 0 0;
                
                image {
                    width: 95%;
                    height: 400rpx;
                }
            }
            
            .nowSel {
                border: 10rpx solid #FFBF0A;
                position: relative;
                border-radius: 20rpx;
            }
            .selToken {
                width: 50rpx;
                height: 50rpx;
                position: absolute;
                top: 0;
                right: 0rpx;
            }
        }
        .shareBtn:first-child{
            background: #aaa;
        }
    	.shareBtn {
    		width: 50%;
    		// position: fixed;
    		// left: 0;
    		// bottom: 0;
    		height: 100upx;
    		background: #FFBF0A;
    		color: #fff;
    		font-size: 32upx;
    		line-height: 100upx;
    		text-align: center;
    		border-radius: 0;
    
    		&::after {
    			border: none;
    		}
    	}
    }
    
    .pickupCode-box {
    	width: 100vw;
        height: 60vh;
    	background: #fff;
    	border-radius: 8rpx; 
    }
    .img{
    	width: 480rpx;
    	height: 480rpx;
    	position: relative;
    	left: 50%;
        top: 20%;
    	margin-left: -240rpx;
    	margin-top: 30rpx;
    }
    .pickupCode-t{
        width: 100%;
        text-align: center;
        height: 60rpx;
        line-height: 60rpx;
        letter-spacing: 8rpx;
        font-size: 40rpx;
        position: absolute;
        top: 10%;
    }
    .pickupCode-c{
        position: relative;
        top: 30%;
        text-align: center;
        border: 1rpx solid #f60;
        height: 80rpx;
        line-height: 80rpx;
        background: #f60;
        color: #fff;
        letter-spacing: 20rpx;
    }
</style>
